<template>
  <el-dialog :close-on-click-modal="false" title="详情" width="80%" :visible.sync="visible">
    <div class="order_details">
      <!-- <el-button plain @click="close">关闭</el-button> -->
      <!-- 关闭 -->
      <!-- <el-button icon="el-icon-close" class="close" @click="close" />-->
      <div class="cotent">
        <div class="left_part">
          <div class="order_info">
            <h2>售后信息</h2>
            <ul>
              <li>
                <p>
                  <span>售后单号:</span>
                  <span>{{ order.afterFormid }}</span>
                </p>
                <p>
                  <span>订单ID:</span>
                  <span>{{ order.orderId }}</span>
                </p>
              </li>
              <li>
                <p>
                  <span>订单状态:</span>
                  <span v-if="order.state === 1">待付款</span>
                  <span v-if="order.state === 2">待发货</span>
                  <span v-if="order.state === 3">待收货</span>
                  <span v-if="order.state === 4">已完成</span>
                  <span v-if="order.state === 5">已取消</span>
                </p>
                <p>
                  <span>售后类型:</span>
                  <span v-if="order.afterType === 1">仅退款</span>
                  <span v-if="order.afterType === 2">退货退款</span>
                </p>
              </li>
              <li>
                <p>
                  <span>退款金额:</span>
                  <span>{{ order.price }}</span>
                </p>
                <p>
                  <span>买家账户:</span>
                  <span>{{ order.customerName }}</span>
                </p>
              </li>
              <li>
                <p>
                  <span>申请时间:</span>
                  <span>{{ order.createTime }}</span>
                </p>
                <p>
                  <span>最近处理时间:</span>
                  <span>{{ order.updateTime }}</span>
                </p>
              </li>
              <li>
                <span>备注:</span>
                <span>{{ order.remark }}</span>
              </li>
            </ul>
          </div>
          <div class="goods_info">
            <h2>商品信息</h2>
            <div
              v-for="(item, index) in order.products"
              :key="index"
              class="goods_list"
            >
              <!-- <div class="good_price">
              <ul>
                <li>
                  <p>商品总价: ¥{{ item.total }}</p>
                  <p>支付金额: ¥{{ order.price }}</p>
                </li>
                <li>
                  <p>物流费用: ￥{{ order.logisticsPrice }}</p>
                </li>
              </ul>
            </div> -->
              <div class="good_details">
                <ul>
                  <li>
                    <img :src="item.image">
                    <div class="details">
                      <p>{{ item.productName }}</p>
                      <div class="skuDetails">
                        <p
                          v-for="(detailsItem, detailsindex) of item.skuDetails"
                          :key="detailsindex"
                        >
                          {{ detailsItem.skuValue }}
                        </p>
                      </div>
                      <p>SKU: {{ item.skuId }}</p>
                    </div>
                  </li>
                  <li class="cen">
                    <p>¥{{ `${item.productPrice} * ${item.number}` }}</p>
                  </li>
                  <li>
                    <p v-if="order.afterType === 1">仅退款</p>
                    <p v-if="order.afterType === 2">退货退款</p>
                  </li>
                  <li>
                    <p class="fontWeight">¥{{ item.total }}</p>
                  </li>
                </ul>
                <div class="totalRefund">
                  运费金额：
                  <span class="fontWeight">¥{{ order.logisticsPrice }}</span>
                </div>
                <div class="totalRefund">
                  退款总金额：
                  <span class="fontWeight">¥{{ order.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="logistics_info">
            <h2>售后记录</h2>
            <div class="after_sales_record">
              <div
                v-for="(item, index) in order.afterHistory"
                :key="index"
                class="record_list"
              >
                <div class="record_list_title">
                  <p>{{ item.title }}</p>
                  <div>
                    <p>买家名称：{{ item.name }}</p>
                    <p>申请时间：{{ item.time }}</p>
                  </div>
                  <p>留言：{{ item.reason }}</p>
                </div>
              </div>
              <div class="record_list_content">
                <!--              <p>-->
                <!--                &lt;!&ndash; <span>{{ item.type }}:</span> &ndash;&gt;-->
                <!--                <span>{{ item.actionNote }}</span>-->
                <!--              </p>-->
                <div v-if="order.images && order.images.length != 0" class="proofBox">
                  <h3>买家举证图片:</h3>
                  <div class="imgBox">
                    <el-image v-for="(item, index) of order.images" :key="index" :src="item" :preview-src-list="order.images" alt />
                  </div>
                </div>
              </div>
            </div>
            <div v-if="order.afterType !== 1" class="logistics_content">
              <p class="logistics_title">
                <span>物流公司: {{ order.express }}</span>
                <span>运单号: {{ order.deliverFormid }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="right_part">
          <div v-if="showOne || showTwo" class="preO">
            <div class="topTips">
              <div class="leftImg">
                <img src="../../../assets/images/tips.png" alt>
              </div>
              <div class="rTitle">
                <b>等待商家处理</b>
                <p>买家已发起售后申请，请尽快处理</p>
              </div>
            </div>
            <div class="buyerR">买家说明:{{ order.explain }}</div>
          </div>
          <div v-if="showThree" class="preO">
            <div class="topTips">
              <div class="leftImg">
                <img src="../../../assets/images/tips.png" alt>
              </div>
              <div class="rTitle">
                <b>买家已退回</b>
                <p>请注意检查货物是否达到退款标准，如未达到，请联系买家协商</p>
              </div>
            </div>
            <div class="buyerR">物流公司:{{ order.express }}</div>
            <div class="buyerR">物流单号:{{ order.deliverFormid }}</div>
          </div>
          <div class="btnList">
            <div v-if="showOne" class="lists">
              <div class="btns" @click="agree(5)">同意退款申请</div>
              <div class="btns" @click="agree(2)">拒绝退款申请</div>
            </div>
            <div v-if="showTwo" class="lists">
              <div class="btns" @click="agree(1)">同意申请</div>
              <div class="btns" @click="agree(2)">拒绝申请</div>
            </div>
            <div v-if="showThree" class="lists">
              <div class="btns" @click="agree(3)">确认收货且退款</div>
              <div class="btns" @click="agree(4)">货物有损拒绝退款</div>
            </div>
          </div>
        </div>
      </div>
      <!-- *********************************弹框开始********************************* -->
      <!-- 申请弹框 -->
      <el-dialog
        :visible.sync="isVisible"
        :title="title"
        width="30%"
        top="32vh"
        center
        :append-to-body="true"
        :close-on-click-modal="false"
      >
        <div v-if="title === '同意申请'" class="agreeTitle">
          同意申请后，系统将自动发送你的退款地址给买家
        </div>
        <div v-if="title === '拒绝退款申请'" class="agreeTitle2">
          <div class="tiTop">
            请与买家协商好后再操作，拒绝后买家仍可以再次申请
          </div>
          <el-input
            v-model="textarea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入留言"
          />
        </div>
        <div v-if="title === '确认收货且退款'" class="agreeTitle2">
          <div class="tiTop">已确认商品无误，退款给买家</div>
        </div>
        <div v-if="title === '货物有损拒绝退款'" class="agreeTitle2">
          <div class="tiTop">我已确认货物有损，不予退款</div>
          <el-input
            v-model="textarea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入留言"
          />
        </div>
        <div v-if="title === '同意退款申请'" class="agreeTitle2">
          <div class="tiTop">同意退款申请后，退款金额将返还至买家的支付渠道</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            v-if="title === '同意申请'"
            type="primary"
            @click="agreeEn(1)"
          >同意申请</el-button>
          <el-button
            v-if="title === '拒绝退款申请'"
            type="primary"
            @click="agreeEn(2)"
          >拒绝申请</el-button>
          <el-button
            v-if="title === '确认收货且退款'"
            type="primary"
            @click="agreeEn(3)"
          >确认退款</el-button>
          <el-button
            v-if="title === '货物有损拒绝退款'"
            type="primary"
            @click="agreeEn(4)"
          >确 定</el-button>
          <el-button
            v-if="title === '同意退款申请'"
            type="primary"
            @click="agreeEn(5)"
          >同意退款</el-button>
          <el-button @click="isVisible = false">取 消</el-button>
        </span>
      </el-dialog>

      <!-- 发货 -->
      <el-dialog
        :visible.sync="isVisibles"
        title="发货"
        :close-on-click-modal="false"
      >
        <el-form
          ref="sendGoodsForm"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="快递公司" prop="express">
            <el-select v-model="form.express" filterable>
              <el-option
                v-for="(item, index) in companyList"
                :key="index"
                :label="item.dictName"
                :value="item.dictId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号" prop="deliverFormid">
            <el-input v-model="form.deliverFormid" />
          </el-form-item>
        <!--
        <el-form-item label="快递公司编号" prop="shipperCode" v-if="false">
          <el-input v-model="form.shipperCode" />
        </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import {
  aftersaleGetById,
  orderGetSelect,
  orderDilevery,
  refundSuccess,
  refundRefuse,
  success,
  refuse,
  confirmAndRefund,
  damaging
} from '@/api/order'
export default {
  name: 'AfterDetails',
  data() {
    return {
      visible: false,
      afterId: 0,
      order: {},
      isVisible: false,
      isVisibles: false,
      companyList: [],
      title: '同意申请',
      textarea: '',
      showOne: false,
      showTwo: false,
      showThree: false,
      form: {
        express: '',
        deliverFormid: '',
        orderId: ''
      },
      rules: {
        logisticsName: [
          { required: false, message: '请输入快递公司名称', trigger: 'blur' }
        ],
        deliverFormid: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ],
        express: [
          { required: true, message: '请选择快递公司', trigger: 'blur' }
        ]
      }
    }
  },
  // computed: {
  //   afterId() {
  //     return this.$route.params.afterId
  //   }
  // },
  // created() {
  //   console.log(this.afterId)
  // },
  mounted() {
    this.getCompanyList()
    // setTimeout(() => {
    //   this.btnShow(),
    //   console.log('mounted')
    // }, 1000)
  },
  methods: {
    show(id) {
      this.visible = true
      this.afterId = id
      this.getProductList()
      console.log(this.order, 'this.order')
    },
    async getProductList() {
      const res = await aftersaleGetById({ afterId: this.afterId })
      this.order = res.data
      this.btnShow()
      console.log(res.data, 'res.data')
    },
    async getCompanyList() {
      const res = await orderGetSelect()
      if (res.code === '') {
        this.companyList = res.data
      }
    },
    // 发货
    confirm() {
      this.$refs.sendGoodsForm.validate((valid) => {
        if (valid) {
          this.form.orderId = this.order.orderId
          orderDilevery(this.form).then((res) => {
            if (res.code === '') {
              this.$message({
                message: '发货成功',
                type: 'success'
              })
              this.isVisibles = false
            }
          })
        }
      })
    },
    cancel() {
      this.isVisibles = false
    },
    close() {
      this.visible = false
    },
    // 申请弹框
    agree(index) {
      if (index === 1) {
        this.title = '同意申请'
        this.isVisible = true
      } else if (index === 2) {
        this.title = '拒绝退款申请'
        this.isVisible = true
      } else if (index === 3) {
        this.title = '确认收货且退款'
        this.isVisible = true
      } else if (index === 4) {
        this.title = '货物有损拒绝退款'
        this.isVisible = true
      } else if (index === 5) {
        this.title = '同意退款申请'
        this.isVisible = true
      } else if (index === 9) {
        this.isVisibles = true
        this.form = {
          express: '',
          deliverFormid: '',
          orderId: 1
        }
      }
    },
    // 同意申请
    async agreeEn(index) {
      if (index === 1) {
        this.title = '同意申请'
        const res = await success({
          orderId: this.order.orderId,
          afterId: this.order.afterId
        })
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
          this.$router.go(-1)
        }
      } else if (index === 2) {
        this.title = '拒绝退款申请'
        if (this.showOne) {
          const res = await refundRefuse({
            orderId: this.order.orderId,
            afterId: this.order.afterId,
            reason: this.textarea
          })
          if (res.code === '') {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.isVisible = false
            this.$router.go(-1)
          }
        }
        if (this.showTwo) {
          const res = await refuse({
            orderId: this.order.orderId,
            afterId: this.order.afterId,
            reason: this.textarea
          })
          if (res.code === '') {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.isVisible = false
            this.$router.go(-1)
          }
        }
      } else if (index === 3) {
        this.title = '确认收货且退款'
        const res = await confirmAndRefund({
          orderId: this.order.orderId,
          afterId: this.order.afterId
        })
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
          this.$router.go(-1)
        }
      } else if (index === 4) {
        this.title = '货物有损拒绝退款'
        const res = await damaging({
          orderId: this.order.orderId,
          afterId: this.order.afterId
        })
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
          this.$router.go(-1)
        }
      } else if (index === 5) {
        const res = await refundSuccess({
          orderId: this.order.orderId,
          afterId: this.order.afterId
        })
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
          this.$router.go(-1)
        }
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
        }
      }
    },
    // 判断按钮展示
    btnShow() {
      console.log(this.order, 'this.order')
      this.showOne = false
      this.showTwo = false
      this.showThree = false
      if (
        this.order.afterType === 1 &&
        (this.order.afterState === 1 || this.order.afterState === 5)
      ) {
        this.showOne = true
      }
      if (
        this.order.afterType === 2 &&
        (this.order.afterState === 1 || this.order.afterState === 5)
      ) {
        this.showTwo = true
      }
      if (this.order.afterType === 2 && this.order.afterState === 3) {
        this.showThree = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../../styles/elDialog.scss");
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order_details {
  .close {
    position: absolute;
    right: 20px;
    &:hover {
      cursor: pointer;
    }
  }
  .cotent {
    overflow: hidden;
    font-size: 14px;
    margin: 20px;
    .goods_info,
    .order_info,
    .logistics_info,
    .pay_order_info,
    .take_goods_info {
      background: #fff;
      margin-bottom: 10px;
      padding: 10px 20px;
    }
    h2 {
      margin: 0;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: -10px;
    }
    .left_part {
      float: left;
      width: calc(70% - 10px);
      margin-right: 10px;
      .order_info {
        box-sizing: border-box;
        ul {
          margin: 10px 20px;
          overflow: hidden;
          li {
            overflow: hidden;
            line-height: 30px;
            p {
              float: left;
              font-size: 14px;
              width: 50%;
              span {
                &:nth-child(2) {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
      .goods_info {
        .goods_list {
          padding: 15px;
          .good_price {
            ul {
              li {
                &:nth-child(1) {
                  p {
                    width: 50%;
                    float: left;
                  }
                }
                p {
                  line-height: 30px;
                }
              }
            }
            border-bottom: 1px gray solid;
          }
          .good_details {
            overflow: hidden;
            ul {
              display: flex;
              padding:0 10px 20px 10px;
              border-bottom: 1px solid #ccc;
              li {
                flex: 5;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .details {
                  margin: 0 30px;
                  width: 150px;
                  line-height: 20px;
                  .skuDetails {
                    display: flex;
                    margin-right: 10px;
                  }
                }
                img {
                  width: 50px;
                  height: 50px;
                }
                &:nth-child(2) {
                  display: block;
                }
              }
              .cen{
                margin-top: 5%;
              }
            }
            .totalRefund{
              display: flex;
              justify-content: right;
              margin: 20px 40px 0 0;
            }
            .fontWeight{
              font-weight: 700;
            }
          }
        }
      }
      .logistics_info {
        .send_good {
          display: block;
          margin: 20px auto !important;
          &:hover {
            cursor: pointer;
          }
        }
        .logistics_content {
          padding: 0 20px;
          .logistics_title {
            span {
              display: inline-block;
              width: 45%;
            }
          }
          .logistics_item {
            span {
              display: inline-block;
              width: 30%;
            }
          }
        }
      }
    }

    .right_part {
      background: #fff;
      float: left;
      width: 30%;
      height: 600px;
      overflow: hidden;
      padding: 50px;
      font-size: 15px;
      .preO {
        .topTips {
          display: flex;
          justify-content: center;
          align-items: center;
          .leftImg {
            img {
              width: 50px;
              height: 50px;
            }
          }
        }
        .buyerR {
          text-align: left;
          margin-left: 53px;
        }
      }
    }
  }
  .record_list_content {
    img {
      width: 100px;
      height: 100px;
    }
    .proofBox {
      margin-top: 20px;
      .imgBox {
        padding-left: 20px;
        .el-image {
          margin-right: 15px;
          width: 100px;
          height: 100px;
        }
      }
      h3 {
        margin-bottom: 20px;
      }
    }
  }
}
.agreeTitle2 {
  text-align: center;
  font-size: 20px;
}
.btnList {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  .lists {
    .btns {
      width: 200px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: #3a68f2;
      margin-bottom: 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
.after_sales_record {
  .record_list {
    padding: 0 20px;
    border-bottom: 1px solid gray;
    overflow: hidden;
    p{
      line-height:30px
    }
    .record_list_title{
      padding: 10px 0;
      div{
        overflow: hidden;
         p{
             float:left ;
             width: 50%;
           }
      }
    }
    .detail_title {
      font-size: 24px;
      color: #333333;
      position: relative;
      margin: 50px 20px 20px;
      &:before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: -20px;
        width: 4px;
        height: 24px;
        background-color: #3a68f2;
      }
    }
  }
}
</style>
